<h2 ng-hide="loaded"> Loading modules...</h2>
<div ng-show="loaded">
    <h2>Available modules ({((modules | filter:searchText).length)}/{(modules.length)})</h2>
    <div class="form-group search-form ng-scope">
        <input class="form-control search-field" ng-model="searchText" placeholder="Filter by module name or keyword" id="search-field">
        <label class="fa fa-search inline-search" for="search-field"></label>
    </div>
    <div class="row" ng-repeat="module in modules | filter:searchText | orderBy:'-downloads'">
        <div class="col-xs-12">
            <div class="card profile">
                <div class="card-header">
                    <div class="card-title">
                        <div class="title"><a ng-click="details(module)" href="">{(module.name[0] | jhiModuleFilter)}</a><small> {(module.version[0])}</small></div>
                        <div class="description">by <a ng-href="https://www.npmjs.com/~{(module.author.join(','))}" target="_blank">{(module.author.join(','))}</a> published on {(module.created[0] | date)}</div>
                        <div class="description">{(module.description.join(','))}</div>
                    </div>
                    <div class="pull-right card-action">
                        <div class="btn-group" role="group" aria-label="...">
                            <button type="button" class="btn btn-link"><i ng-show="isVerified(module)" class="fa fa-star" data-toggle="tooltip" data-placement="left" title="Verfied Module"></i></button>
                        </div>
                    </div>
                    <div class="clear-both"></div>
                </div>
                <div class="card-footer">
                    <a type="button" class="btn btn-info" ng-click="details(module)">Details</a>
                    <a type="button" class="btn btn-default" ng-href="{(module.homepage[0])}">Home page</a>
                    {(module.downloads)} downloads last month.
                    <div class="pull-right hidden-xs hidden-sm">
                        <span class="label label-default keyword" ng-repeat="keyword in module.keywords">{( keyword )}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
